import {lazy,Suspense} from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import { customHistory } from '@/utils'
import { AuthRoute } from '@/components/AuthRoute'

import { LoadingOutlined } from '@ant-design/icons'
import { Spin } from 'antd'

import './App.scss'

// 导入页面
const Layout = lazy(()=> import('./pages/Layout'))
const Login = lazy(()=> import('./pages/Login'))
const NotFound = lazy(() => import('./pages/NotFound'))

// 创建自定义加载图标
const antIcon = (
  <LoadingOutlined
    style={{
      fontSize: 24,
    }}
    spin
  />
)

const App = () => {
  return (
    <Router history={customHistory}>
      <Suspense
        fallback={
          <div className="loading">
            <Spin indicator={antIcon} tip="Loading..." />
          </div>
        }
      >
        <div className="app">
          <Switch>
            <Route path="/" exact render={() => <Redirect to="/home" />} />
            <AuthRoute path="/home" component={Layout} />
            <Route path="/login" component={Login} />
            {/* 404 */}
            <Route>
              <NotFound />
            </Route>
          </Switch>
        </div>
      </Suspense>
    </Router>
  )
}

export default App
